<template>
  <div class="div-pop" catchtouchmove="true">
    <div class="agree-box">
      <div class="top-back" :style="'top: '+ personalTop + 'px'"
        @click="backBtn">
        <label class="flex v-align-c">
          <icon class="iconfont icon-arrow-right"></icon>
        </label>
      </div>
      <div class="top-nav" :style="{'height': spaceBarHeight + 'px'}">
        <div class="flex-center v-align-c pad-b-8"
          :style="{'padding-top': statusBarTop + 'px'}">
          <label class="top-txt">用户协议</label>
        </div>
      </div>
      <div class="content" :style="'margin-top: '+ contentTop + 'px'">
        <scroll-view scroll-y="" class="clearfix scroll-sky">
          <p v-for="(item, index) in 6" :key="index" class="pad-b-20">提供与第三方网站的链接仅仅为了给您带来方便。
            如果您使用这些链接，将离开萤火云店站点。萤火云店没有审查过所有这些第三方站点，
            对任何这些站点及其内容或它们的保密政策不进行控制，也不负任何责任。
            因此，我们对这些网站上的任何信息、软件以及其它产品或材料，或者通过使用它们可能获得的任何结果不予认可，
            也不作任何表述。如果您决定访问本站点链接的任何第三方站点，其风险完全由您自己承担。</p>
        </scroll-view>
      </div>
    </div>
  </div>
</template>

<script>
  import { decrypt } from '@/api/wechat'
  import { setPhone } from '@/utils/auth'

  export default {
    data() {
      return {
        isComponents: true,
        userInfo: {},
        hasTelInfo: false,
        showBtn: false,
        statusBarHeight: 0,
        spaceBarHeight: 0,
        statusBarTop: 0,
        personalTop: 0,
        contentTop: 0,
        appInfo: {}
      }
    },
    props: {
      customerInfo: {
        type: Object,
        default: {}
      }
    },
    onLoad() {
      // 初始化data
      Object.assign(this.$data, this.$options.data())
      this.spaceBarHeight = this.$pt.getSystemInfoSync()['statusBarHeight'] + 44 + 36
      this.statusBarHeight = this.$pt.getSystemInfoSync()['statusBarHeight'] + 44
      // 店铺信息栏
      this.statusBarTop = this.statusBarHeight - 38
      this.personalTop = this.statusBarHeight - 41
      let sysInfo = ''
      sysInfo = this.$pt.getSystemInfoSync()
      if (sysInfo.system.indexOf('iOS') === -1) {
        this.statusBarTop = this.statusBarHeight - 37
        this.personalTop = this.statusBarHeight - 38
      }
      this.contentTop = this.statusBarHeight + 2
    },
    onShow() {
      this.initEls()
    },
    mounted() {
      setTimeout(() => {
        this.initEls()
      }, 100)
    },
    methods: {
      backBtn() {
        this.$emit('backUser')
      },
      initEls() {
        if (!this.getPhone) {
          setTimeout(() => {
            this.showBtn = true
          }, 300)
        } else {
          this.showBtn = false
        }
      },
      getPhoneNumber(e) {
        if (e) {
          if (e.mp.detail.encryptedData) {
            // 保存电话号码
            decrypt({
              memberId: this.getCustomerId,
              encryptedData: e.mp.detail.encryptedData,
              iv: e.mp.detail.iv,
              type: 1
            }).then((res) => {
              if (res.isError) return
              if (res.data.phone) {
                setPhone(res.data.phone)
                this.hasTelInfo = true
                this.$emit('updatePhoneInfo')
              }
            }).catch(() => {
            })
          } else {
            this.$pt.showModal({
              title: '温馨提示',
              content: '该appId没有权限，请前往微信认证',
              success: res => {
              }
            })
          }
        }
      }
    }
  }
</script>

<style scoped lang="less">
  .div-pop{
    z-index: 1001;
  }
  .agree-box {
    width: 375px;
    height: calc(100vh);
    background-color: #fff;
    overflow: hidden;
    .top-back{
      position: fixed;
      left: 0px;
      top: 28px;
      z-index: 101;
      padding: 8px 10px 8px 7px;
      .iconfont{      
        font-size: 20px;
        font-weight: bold;
        transform:rotate(180deg);
      }
    }
    .top-nav{
      background: #ffffff;
      color: #333;
      box-sizing: border-box;
      text-align: center;
      font-size: 15px;
      position: fixed;
      width: 100%;
      left: 0;
      top: 0;
      z-index: 100;
      .top-txt{
        font-size: 18px;
        color: #333;
      }
    }   
    .content{ 
      position: relative;
      z-index: 200;
      padding: 0 15px;
      .scroll-sky{
        max-height: calc(100vh - 90px);
      }
    }
  }
</style>
